<template>
	<view v-if="is_init">
		<uni-popup-input name="新增/编辑" @close="on_close">

			<view class="banmi_input_edit a-c">
				<view class="banmi_input_edit_name">
					<text class="cred">*</text>消息描述
				</view>
				<view class="banmi_input_val">
					<uni-easyinput v-model="find.notice_describe" placeholder="">
					</uni-easyinput>
				</view>
			</view>

			<template v-if="template_type=='wx_mp_notice' || template_type=='wx_mch_notice'  ">
				<view class="banmi_input_edit a-c">
					<view class="banmi_input_edit_name">
						<text class="cred">*</text>模板编号
					</view>
					<view class="banmi_input_val">
						<uni-easyinput v-model="template_find.template_number" placeholder="">
						</uni-easyinput>
					</view>
				</view>
				<view class="banmi_input_edit a-c">
					<view class="banmi_input_edit_name">
						<text class="cred">*</text>模板ID：
					</view>
					<view class="banmi_input_val">
						<uni-easyinput v-model="template_find.template_id" placeholder="">
						</uni-easyinput>
					</view>
				</view>

			</template>


			<view class="banmi_input_edit a-c">
				<view class="banmi_input_edit_name">
					场景变量:
				</view>
				<view class="banmi_input_val">
					<view class="banmi_flex a-c">
						<view @click="on_copy(item.key)" v-for="(item,index) in field_variable" :key="index"
							class="banmi_flex a-c j-c b_y f28"
							style="border: solid 2rpx #c0c0c0;margin: 5px;width: 80px;height: 30px;">
							{{item.name}}
						</view>

					</view>
				</view>
			</view>

			<template v-if="template_type=='system_notice'">

				<view class="banmi_input_edit a-c">
					<view class="banmi_input_edit_name">
						<text class="cred">*</text>消息内容：
					</view>
					<view class="banmi_input_val">
						<uni-easyinput type="textarea" v-model="system_notice.content">
						</uni-easyinput>
					</view>
				</view>

				<view class="banmi_input_edit banmi_flex a-c">
					<view class="banmi_input_edit_name">
						是否开启
					</view>
					<view @click="confirm_is_system_notice(find.is_system_notice)">
						<banmi-switch :is_state="find.is_system_notice" is_type='0'></banmi-switch>
					</view>
				</view>

			</template>

			<template v-if="template_type=='sms_notice'">

				<view class="banmi_input_edit a-c">
					<view class="banmi_input_edit_name">
						<text class="cred">*</text>短信模板id：
					</view>
					<view class="banmi_input_val">
						<uni-easyinput type="text" v-model="sms_notice.sms_id">
						</uni-easyinput>
					</view>
				</view>
				<view class="banmi_input_edit a-c">
					<view class="banmi_input_edit_name">
						<text class="cred">*</text>消息内容：
					</view>
					<view class="banmi_input_val">
						<uni-easyinput type="textarea" v-model="sms_notice.content">
						</uni-easyinput>
					</view>
				</view>

				<view class="banmi_input_edit banmi_flex a-c">
					<view class="banmi_input_edit_name">
						是否开启
					</view>
					<view @click="confirm_is_sms_notice(find.is_sms_notice)">
						<banmi-switch :is_state="find.is_sms_notice" is_type='0'></banmi-switch>
					</view>
				</view>

			</template>


			<template v-if="template_type=='wx_mp_notice' || template_type=='wx_mch_notice' ">
				<view class="banmi_input_edit a-c">
					<view class="banmi_input_edit_name">
						模板内容：
					</view>
					<view class="banmi_input_val banmi_flex">
						<view class="" style="margin-top: -7px;">
							<view class="banmi_flex a-c  p-b-10 " v-for="(item,index) in template">
								<view class="f28 c-7" style="width: 70px;">
									字段名称
								</view>
								<view style="width: 150px;">
									<uni-easyinput v-model="item.name" placeholder="">
									</uni-easyinput>
								</view>
								<view class="f28 c-7 m-l-10" style="width: 50px;">
									关键词
								</view>
								<view style="width: 200px;">
									<uni-easyinput v-model="item.keyword" placeholder="">
									</uni-easyinput>
								</view>
								<view class="f28 c-7 m-l-10" style="width: 40px;">
									字段
								</view>
								<view style="width: 200px;">
									<uni-easyinput v-model="item.content" placeholder="">
									</uni-easyinput>
								</view>
								<view class="m-l-10">
									<button @click="on_tel_del(index)" type="primary"
										style="background-color: #E9967A;width: 150rpx;" size="mini">删除</button>
								</view>
							</view>
							<view class="">
								<button @click="on_tel" type="primary" size="mini">新增</button>
							</view>
						</view>
					</view>
				</view>
				<view class="banmi_input_edit banmi_flex a-c">
					<view class="banmi_input_edit_name">
						模板预览：
					</view>
					<view>
						<view class=" " style="margin-top: -1px;">
							<view class="flex p-b-10 " v-for="(item,index) in template">
								<view class="f-14" style="width: 90px;">
									{{item.name}}
								</view>
								<view class="f-14">
									{{zuo}}{{item.keyword}}.DATA{{you}}
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="banmi_input_edit banmi_flex a-c" v-if="template_type=='wx_mp_notice'">
					<view class="banmi_input_edit_name">
						是否开启
					</view>
					<view @click="confirm_is_wx_mp_notice(find.is_wx_mp_notice)">
						<banmi-switch :is_state="find.is_wx_mp_notice" is_type='0'></banmi-switch>
					</view>
				</view>
				<view class="banmi_input_edit banmi_flex a-c" v-if="template_type=='wx_mch_notice'">
					<view class="banmi_input_edit_name">
						是否开启
					</view>
					<view @click="confirm_is_wx_mch_notice(find.is_wx_mch_notice)">
						<banmi-switch :is_state="find.is_wx_mch_notice" is_type='0'></banmi-switch>
					</view>
				</view>



			</template>

			<view class="a-c  p-b-20 banmi_input_edit">
				<view class="banmi_input_edit_name">
				</view>
				<view class="">
					<button @click="on_sava()" type="primary" style="width: 80px;" size="mini">保存</button>
				</view>
			</view>
		</uni-popup-input>
		<!-- 	颜色选择器 -->
		<t-color-picker ref="colorPicker" @confirm="confirm_color"></t-color-picker>
	</view>
</template>

<script>
	import provinceData from '@/components/fd-picker/city-china.json';
	var find = {
		category_id: '',
		city: '',
		title: '',
		img: '',
		video: '',
		file: '',
		open: '',
		content: '',
		userip: '',
	};
	export default {
		components: {},
		props: {},
		data() {
			return {
				zuo: "{{",
				you: "}}",
				list: "",
				find: {},
				wx_mch_notice: {},
				template_find: {},
				template: [],
				shili: '',
				field_variable: [],

				is_init: false,
				nav_list: [],
				img_url: '',
				arr_val: [{
						"value": '1',
						"text": "按钮1",
					},
					{
						"value": "2",
						"text": "按钮2",
					},
					{
						"value": "3",
						"text": "按钮3",
					},
				],
				provinceData: provinceData, //本地省市区数据 
				screenWidth: 0,
				localdata_category_id: [],
				template_type: '',
				system_notice: {}
			}
		},

		methods: {
			on_tel() {
				var find = {
					"name": "",
					"keyword": "",
					"content": ""
				}
				this.template.push(find)
			},
			on_copy(key) {

				if (this.template_type == 'system_notice' || this.template_type == 'sms_notice') {
					key = '{' + key + '}';
				}

				uni.setClipboardData({
					data: key,
					success: function() {
						uni.showToast({
							title: '字段复制成功'
						})
					}
				});
			},
			on_tel_del(index) {

				this.template.splice(index, 1)
			},
			confirm_is_wx_mp_notice(val) {
				if (val == 1) {
					this.find.is_wx_mp_notice = 0
					return
				}
				this.find.is_wx_mp_notice = 1
			},
			confirm_is_system_notice(val) {
				if (val == 1) {
					this.find.is_system_notice = 0
					return
				}
				this.find.is_system_notice = 1
			},
			confirm_is_wx_mch_notice(val) {
				if (val == 1) {
					this.find.is_wx_mch_notice = 0
					return
				}
				this.find.is_wx_mch_notice = 1
			},
			confirm_is_sms_notice(val) {
				if (val == 1) {
					this.find.is_sms_notice = 0
					return
				}
				this.find.is_sms_notice = 1
			},
			confirm_open(val) {
				if (val == 2) {
					this.find.open = 1
					return
				}
				this.find.open = 2
			},
			on_sava() {
				var that = this;
				this.find.id = this.id
				this.find.field_variable = JSON.stringify(that.field_variable);


				if (this.template_type == 'wx_mch_notice') {
					this.template_find['template'] = this.template;
					this.find.wx_mch_notice = JSON.stringify(this.template_find);
				}
				if (this.template_type == 'wx_mp_notice') {
					this.template_find['template'] = this.template;
					this.find.wx_mp_notice = JSON.stringify(this.template_find);
				}
				if (this.template_type == 'system_notice') {
					this.find.system_notice = JSON.stringify(this.system_notice);
				}
				if (this.template_type == 'sms_notice') {
					this.find.sms_notice = JSON.stringify(this.sms_notice);
				}
                var find = {
					find:  JSON.stringify(this.find)
				}
				

				this.Http.post('banmichaoqiangbizhi/admin/Settingsnotice/save', find).then(ret => {
					uni.showToast({
						title: ret.msg,
						icon: 'none'
					})
					if (ret.status == 200) {
						this.$emit("confirm");
						this.on_close();
					}
				})
			},
			init(id, type) {
				var that = this;
				this.template_type = type;
				that.id = id
				if (that.id == 0) {
					this.find = find;
					this.is_init = true;
					return
				}
				let requestParams = {
					id: that.id,
				};

				this.Http.post('/banmichaoqiangbizhi/admin/Settingsnotice/views', requestParams).then(ret => {
					this.img_url = ret.img_url
					if (ret.status == 200) {
						this.find = ret.data.find;

						//推送的字段 //请保证数据为json字符串
						this.field_variable = JSON.parse(this.find['field_variable'])

						//系统模板设置 //请保证数据为json字符串
						if (this.template_type == 'system_notice') {
							this.system_notice = JSON.parse(this.find['system_notice'])
						}
						//短信模板设置 //请保证数据为json字符串
						if (this.template_type == 'sms_notice') {
							this.sms_notice = JSON.parse(this.find['sms_notice'])
						}

						//小程序模板设置 //请保证数据为json字符串
						if (this.template_type == 'wx_mch_notice') {
							this.find['wx_mch_notice'] = JSON.parse(this.find['wx_mch_notice'])
							this.template_find = this.find['wx_mch_notice'];
							this.template = this.find['wx_mch_notice']['template'];
						}
						//公众号模板设置 //请保证数据为json字符串
						if (this.template_type == 'wx_mp_notice') {
							this.find['wx_mp_notice'] = JSON.parse(this.find['wx_mp_notice'])
							this.template_find = this.find['wx_mp_notice'];
							this.template = this.find['wx_mp_notice']['template'];
						}
						if (this.template_type == 'wx_mp_notice' || this.template_type == 'wx_mch_notice') {
							var arr = [];
							for (var i = 0; i < this.template.length; i++) {
								var find = {
									"name": this.template[i]['name'],
									"key": this.template[i]['content'],
								}
								arr.push(find);
							}
						}

						if (that.id == 0) {
							this.variabl = this.arr
						}

						this.is_init = true;

					}
				})
			},


			on_close() {
				this.is_init = false;
			},
			//js分类方法

		}
	}
</script>

<style>
	button::after {
		border: none;
	}

	.top_head {
		background-color: #F8F8F8;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.but {
		width: 120rpx;
		height: 100rpx;
		padding: 0;
		border: 0;
		background-color: transparent;
		outline: none;
	}
</style>